<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>消息</title>
    <link type="text/css" rel="stylesheet" href="css/notification_light.css">
    <link type="text/css" rel="stylesheet" href="css/markdown_light.css">
</head>
<body>

<div id="page">
    <div class="cell" v-for="message of messages">
        <div class="main">
            <div class="top-container">
                <img class="avatar" v-bind:src="message.author.avatar_url | avatarCompat" v-on:click="openUser(message.author.loginname)">
                <div class="info">
                    <div class="line1">
                        <span class="loginname text-primary">
                            {{message.author.loginname}}
                        </span>
                        <span class="time" v-bind:class="{'text-secondary': message.has_read, 'text-accent': !message.has_read}">
                            {{message.create_at | relativeTimeSpan}}
                        </span>
                    </div>
                    <div class="line2">
                        <span class="action text-secondary">
                            {{message | messageAction}}
                        </span>
                        <div class="badge-dot" v-if="!message.has_read"></div>
                    </div>
                </div>
            </div>
            <div class="markdown-container" v-if="message.reply && message.reply.id" v-on:click="openImageProxy($event)">
                {{{message.reply.content_html}}}
            </div>
            <div class="reference-container"  v-on:click="openTopic(message.topic.id)">
                <div class="topic-title text-secondary">话题：{{message.topic.title}}</div>
            </div>
        </div>
        <div class="deep-line"></div>
    </div>
</div>

<script src="js/vue.min.js"></script>
<script src="js/notification.js"></script>

</body>
</html>